<template>
  <!-- 右侧弹窗 -->
  <div id="leftPopup">
    <van-popup v-model="popupShow"
               position="left"
               :style="{ height: '100%',width:'80%',background: '#f5f5f5' }">
      <van-cell style="display:flex;background: #f5f5f5;margin-top:10px"
                @click="userLogin">
        <template #title>
          <van-image width="40"
                     height="40"
                     round
                     style="float:left;border:2px solid #fff;"
                     :src="imgSrc" />
          <span class="custom-title">
            {{username}}
            <van-icon name="arrow" />
          </span>
        </template>
      </van-cell>
      <van-cell-group class="cellBack">
        <van-cell title="我的消息"
                  is-link
                  :to="'/myNews'" />
        <van-cell title="云贝中心"
                  is-link
                  to="/yunbei" />
      </van-cell-group>

      <van-cell-group class="cellBack">
        <van-cell title="设置"
                  is-link
                  to="/setting" />
        <van-cell title="夜间模式"
                  is-link />
        <van-cell title="定时关闭"
                  is-link />
        <van-cell title="个性装扮"
                  is-link />
      </van-cell-group>

      <van-cell-group class="cellBack">
        <van-cell title="关于"
                  is-link />
      </van-cell-group>

      <div class="btn">
        <van-button type="default"
                    block
                    round
                    @click="handleLogout">
          退出登录
        </van-button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { getUserDetalis } from '@/api/userInfo'
import avatar from '@/assets/avatar.png'
export default {
  name: 'leftPopup',
  props: {
    popupDialog: Boolean,
  },
  data() {
    return {
      popupShow: false,
      imgSrc: avatar,
      userInfo: {},
      username: '立刻登录',
    }
  },
  watch: {
    popupDialog: function (value) {
      this.popupShow = true
    },
  },
  methods: {
    userLogin() {
      if (!this.$store.state.userInfo.cookie) {
        this.$router.push('/login')
      } else {
        this.$router.push({
          path: `/user`,
          query: {
            id: this.$store.state.userInfo.userData.userId,
          },
        })
      }
    },
    // 退出登录
    handleLogout() {
      if (this.$store.state.userInfo.cookie) {
        this.globalObj.$Dialog
          .confirm({
            message: '确定退出登录吗',
          })
          .then(() => {
            this.$store.commit('getUserInfo', '')
            this.popupShow = false
          })
      } else {
        this.globalObj.$Dialog({ message: '未登录' })
      }
    },
  },
  mounted() {
    if (this.$store.state.userState) {
      this.imgSrc = this.$store.state.userInfo.userData.avatarUrl
      this.username = this.$store.state.userInfo.userData.nickname
    }
  },
}
</script>

<style scoped>
#leftPopup {
  width: 100%;
}
.custom-title {
  font-size: 14px;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}
.custom-title > .van-icon {
  float: right;
  padding-top: 4px;
}
.cellBack {
  width: 90%;
  padding: 5px;
  margin: 10px auto;
  background: #fff;
  border-radius: 7px;
}
.btn {
  width: 90%;
  padding-top: 15px;
  margin: 0 auto;
}
</style>